// 属性的基本使用 this.props
import React, { Component } from 'react'

// 定义子组件 头部组件
class Header extends Component {
    // 默认值
    static defaultProps = { // 给props属性添加默认值
        bgc: 'skyblue',
        title: '默认标题'
    }
    render() {
        return (
            <header style={{
                width: '100%',
                height: 40,
                lineHeight: '40px',
                backgroundColor: this.props.bgc
            }}>
                {/* this.props 是要获取调用这个组件的标签属性 */}
                {this.props.title}

                {/* this.props.children 专门获取子组件被调用的时候，写成双标签时，标签中的子元素 */}
                {this.props.children}
            </header>
        )
    }
}

// 定义父组件
export default class App7 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            title: '首页标题'
        }
    }
    render() {
        return (
            <div>
                {/* 标签的属性可以让props接收 */}
                <Header title={this.state.title} bgc="#cff" />
                <Header title="列表页标题" bgc="pink" />

                {/* 默认标题 */}
                {/* <Header /> */}

                {/* 子元素 */}
                <Header>子元素</Header>
            </div>
        )
    }
}
